<template>
  <div class="headWrap">
    <router-link to="/home" href="javascript:;" class="home"></router-link>
    <a href="javascript:;" class="logo"></a>
    <div class="right">
      <a href="javascript:;" class="search"></a>
      <a href="javascript:;" class="cart"></a>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index'
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .headWrap
    z-index 5
    position fixed
    top 0
    left 0
    width 100%
    height 88px
    background #FAFAFA
    box-sizing border-box
    padding 0 16px 0 24px
    display flex
    justify-content: space-between
    align-items center
    a
      display block
      box-sizing border-box
    .home
      width 60px
      height 60px
      background url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/hd-s9f33319f5a-b1aa4c35e6.png") no-repeat
      background-position: 4px -60px
      background-size 280%
    .logo
      width 172px
      height 54px
      margin-left 100px
      background url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/hd-s9f33319f5a-b1aa4c35e6.png") no-repeat
      background-position: 2px -126px
      background-size 100%
    .right
      flex 0.4
      display flex
      justify-content space-between
      .search
        width 64px
        height 64px
        background url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/hd-s9f33319f5a-b1aa4c35e6.png") no-repeat
        background-position: -2px -330px
        background-size 250%
      .cart
        width 64px
        height 64px
        background url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/hd-s9f33319f5a-b1aa4c35e6.png") no-repeat
        background-position: -5px -2px
        background-size 250%
</style>
